<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="row" id="album">
	<div class="span10">
		<p id="nophoto">
			还没有相册, 赶快创建一个吧！<a href="#photo-form" data-toggle="modal">创建相册</a>
		</p>

		<ul class="thumbnails">
			<c:forEach items="${albumList}" var="entity">
				<li class="span2">
					<div class="thumbnail borderlight">
						<img alt="" width="160" src="<%=request.getContextPath() + "/img/photo/200.png"%>">
						<div class="caption">
							<p>${entity.name}</p>
						</div>
					</div>
				</li>
			</c:forEach>
		</ul>

		<div class="modal fade" id="photo-form">
			<div class="modal-header">
				<a class="close" data-dismiss="modal">×</a>
				<h3>创建相册</h3>
			</div>

			<div class="modal-body">
				<form class="form-horizontal" action="<%=request.getContextPath()%>/personal/photo/create">
					<div class="control-group">
						<label class="control-label">相册名称</label>
						<div class="controls">
							<input name="name" type="text" maxlength="10">
							<p class="help-block">长度在0~10, 只允许包含字母，数字，汉字。</p>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">相册描述</label>
						<div class="controls">
							<input name="description" type="text" maxlength="20">
							<p class="help-block">长度 20字以內。</p>
						</div>
					</div>
					<div class="form-actions">
						<button class="btn btn-primary" type="submit">
							<i class="icon-pencil"></i> 新增
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		$('#photo-form').modal({
			show : false
		});
	})
</script>
